@extends('common')
@section('content')
    <!--中间-->
    <div class=" w1000 margincenter bgfff charicontent">
        <p class="ft14 c3838 pt20 mb20">您现在的位置是：{{$pos}}</p>
        <div class="overflow charitablecontent">
            <div class="overflow fl charitfl">
                <div class="overflow  information">
                    <div class="overflow charitop">
                        <div class="overflow coluntitle ft14 c3838">
                            <span class="cishanxiangmu cfff ft18 ftc inblock fl">热点资讯</span>
                            <a href="{{route('news.cls_list' , ['cls_id' => -1])}}" class="inblock fr mr20 zixunmore">更多>></a>
                        </div>
                        <div class="overflow informationlist pl10 pr10  pt20">
                            @foreach($hotImg as $v)
                                <a class="zixunlist block overflow" href="{{route('news' , ['id' => $v->id])}}">
                                    <div class="overflow fl zixunhot"><img src="{{asset('upload') . '/' . $v->img}}"/>
                                    </div>
                                    <span class="inblock fl zixuntime zixunconten ml10">
					 								<p class="textoverflow c3838 ft16">{{$v->title}}</p>
					 								<abbr class="inblock textoverflow mt20 vermildle">{{$v->subhead}}</abbr>
					 							</span>
                                </a>
                            @endforeach
                            @foreach($hotList as $v)
                                <a class="zixunlist block overflow" href="{{route('news' , ['id' => $v->id])}}">
                                    <div class="overflow fl">
                                        <span class="inblock zico zixunico vermildle"></span>
                                        <abbr class="inblock textoverflow vermildle">{{$v->title}}</abbr>
                                    </div>
                                    <span class="inblock fr zixuntime">{{$v->subtitle}}</span>
                                </a>
                            @endforeach
                        </div>

                    </div>
                </div>

                <div class="overflow recentaid mt20">
                    <div class="overflow coluntitle ft14 c3838">
                        <span class="cishanxiangmu cfff ft18 ftc inblock fl">近期救助</span>
                        <a href="{{route('project.list' , ['cls_id' => 29])}}" class="inblock fr mr20 zixunmore">更多>></a>
                    </div>
                    <div class="overflow informationlist">
                        <div id="jssor_1"
                             style="position: relative; margin: 0 auto; top: 0px; left: 0px; width: 293px; height: 300px; ">
                            <!-- Loading Screen -->
                            <div data-u="loading" style="position: absolute; top: 0px; left: 0px;">
                                <div style="filter: alpha(opacity=70); opacity: 0.7; position: absolute; display: block; top: 0px; left: 0px;"></div>
                                <!--<div style="position:absolute;display:block;background:url('img/loading.gif') no-repeat center center;top:0px;left:0px;width:100%;height:100%;"></div>-->
                            </div>
                            <div data-u="slides"
                                 style="cursor: default; position: relative; top: 0px; left: 0px; width: 293px; height: 198px; ">
                                @foreach($projectList as $v)
                                    <div data-p="144.50" style="padding: 0 20px;">
                                        <img data-u="image" src="{{asset('upload') . '/' . $v->img}}"/>
                                        <img data-u="thumb" src="{{asset('upload') . '/' . $v->img}}"/>
                                    </div>
                                @endforeach

                                <a data-u="any" href="http://www.jssor.com" style="display:none">Image Gallery</a>
                            </div>
                            <div data-u="thumbnavigator" class="jssort01"
                                 style="position:absolute;left:0px;bottom:0px;width:293px;height:100px;"
                                 data-autocenter="1">
                                <div data-u="slides" style="cursor: default;">
                                    <div data-u="prototype" class="p">
                                        <span class="inblock jiantoudefalut"></span>
                                        <div class="w">
                                            <div data-u="thumbnailtemplate" class="t"></div>
                                        </div>
                                        <div class="c"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="overflow charitymap mt20">
                    <div class="overflow coluntitle ft14 c3838">
                        <span class="cishanxiangmu cfff ft18 ftc inblock fl">慈善地图</span>
                        <a href="{{route('maps')}}" class="inblock fr mr20 zixunmore">更多>></a>
                    </div>
                    <div class="overflow informationlist ftc">{!!$orgRoot->longitude!!}</div>
                </div>

            </div>
            <div class="overflow fr charitfr">
                <div class="overflow coluntitle coluntitlezjs ft18 c3838 pl20">
                    <em class="inblock zico coluliistico coluliisticopro"></em>慈善救助
                </div>
                <div class="charitfrlist charitfrlistzjs oveflow">
                    <ul>
                        @foreach($news_list as $v)
                            <li onclick="window.location.href='{{route('project' , ['id' => $v->id])}}'">
                                <div class="overflow rela listpro">
                                    <img src="{{asset('upload') . '/' . $v->img}}" style="width: 200px;height: 200px;"/>
                                    <div class="overflow abs listtitle ftc textoverflow cfff ft16">{{$v->name}}</div>
                                </div>
                                <div class="overflow listtext mt10">
                                    <p class="ft14 textoverflow">单位：{{$v->body_name}}</p>
                                    <p class="ft14 textoverflow">周期：{{$v->period}}年</p>
                                    <p class="ft14 textoverflow">援助对象：{{$v->receiver}}</p>
                                    <p class="ft14 textoverflow">援助额度：{{$v->amount}}元</p>
                                </div>
                                <a href="{{route('project' , ['id' => $v->id])}}" class="inblock listdetailbtn ft16 ftc">详情</a>
                            </li>
                        @endforeach
                    </ul>
                    <div class="clear"></div>
                    @include('page_project')
                </div>
            </div>
        </div>
    </div>
    <!--中间  end-->
@endsection

@section('scripts')
    <script src="{{asset('js/jssor.slider-21.1.6.mini.js')}}" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        $(function () {
            $(".charinav span").click(function () {
                $(this).addClass("chardefalut").siblings().removeClass("chardefalut");
            });

            $(".coluntitles").click(function () {
                $(this).find(".coludefalut").show().parent().siblings().find(".coludefalut").hide();
            });

        });
    </script>

    <script type="text/javascript">
        jQuery(document).ready(function ($) {

            var jssor_1_SlideshowTransitions = [
                {
                    $Duration: 1200,
                    x: 0.3,
                    $During: {$Left: [0.3, 0.7]},
                    $Easing: {$Left: $Jease$.$InCubic, $Opacity: $Jease$.$Linear},
                    $Opacity: 2
                },
                {
                    $Duration: 1200,
                    x: -0.3,
                    $SlideOut: true,
                    $Easing: {$Left: $Jease$.$InCubic, $Opacity: $Jease$.$Linear},
                    $Opacity: 2
                },
                {
                    $Duration: 1200,
                    x: -0.3,
                    $During: {$Left: [0.3, 0.7]},
                    $Easing: {$Left: $Jease$.$InCubic, $Opacity: $Jease$.$Linear},
                    $Opacity: 2
                },
                {
                    $Duration: 1200,
                    x: 0.3,
                    $SlideOut: true,
                    $Easing: {$Left: $Jease$.$InCubic, $Opacity: $Jease$.$Linear},
                    $Opacity: 2
                },
                {
                    $Duration: 1200,
                    y: 0.3,
                    $During: {$Top: [0.3, 0.7]},
                    $Easing: {$Top: $Jease$.$InCubic, $Opacity: $Jease$.$Linear},
                    $Opacity: 2
                },
                {
                    $Duration: 1200,
                    y: -0.3,
                    $SlideOut: true,
                    $Easing: {$Top: $Jease$.$InCubic, $Opacity: $Jease$.$Linear},
                    $Opacity: 2
                },
                {
                    $Duration: 1200,
                    y: -0.3,
                    $During: {$Top: [0.3, 0.7]},
                    $Easing: {$Top: $Jease$.$InCubic, $Opacity: $Jease$.$Linear},
                    $Opacity: 2
                },
                {
                    $Duration: 1200,
                    y: 0.3,
                    $SlideOut: true,
                    $Easing: {$Top: $Jease$.$InCubic, $Opacity: $Jease$.$Linear},
                    $Opacity: 2
                },
                {
                    $Duration: 1200,
                    x: 0.3,
                    $Cols: 2,
                    $During: {$Left: [0.3, 0.7]},
                    $ChessMode: {$Column: 3},
                    $Easing: {$Left: $Jease$.$InCubic, $Opacity: $Jease$.$Linear},
                    $Opacity: 2
                },
                {
                    $Duration: 1200,
                    x: 0.3,
                    $Cols: 2,
                    $SlideOut: true,
                    $ChessMode: {$Column: 3},
                    $Easing: {$Left: $Jease$.$InCubic, $Opacity: $Jease$.$Linear},
                    $Opacity: 2
                },
                {
                    $Duration: 1200,
                    y: 0.3,
                    $Rows: 2,
                    $During: {$Top: [0.3, 0.7]},
                    $ChessMode: {$Row: 12},
                    $Easing: {$Top: $Jease$.$InCubic, $Opacity: $Jease$.$Linear},
                    $Opacity: 2
                },
                {
                    $Duration: 1200,
                    y: 0.3,
                    $Rows: 2,
                    $SlideOut: true,
                    $ChessMode: {$Row: 12},
                    $Easing: {$Top: $Jease$.$InCubic, $Opacity: $Jease$.$Linear},
                    $Opacity: 2
                },
                {
                    $Duration: 1200,
                    y: 0.3,
                    $Cols: 2,
                    $During: {$Top: [0.3, 0.7]},
                    $ChessMode: {$Column: 12},
                    $Easing: {$Top: $Jease$.$InCubic, $Opacity: $Jease$.$Linear},
                    $Opacity: 2
                },
                {
                    $Duration: 1200,
                    y: -0.3,
                    $Cols: 2,
                    $SlideOut: true,
                    $ChessMode: {$Column: 12},
                    $Easing: {$Top: $Jease$.$InCubic, $Opacity: $Jease$.$Linear},
                    $Opacity: 2
                },
                {
                    $Duration: 1200,
                    x: 0.3,
                    $Rows: 2,
                    $During: {$Left: [0.3, 0.7]},
                    $ChessMode: {$Row: 3},
                    $Easing: {$Left: $Jease$.$InCubic, $Opacity: $Jease$.$Linear},
                    $Opacity: 2
                },
                {
                    $Duration: 1200,
                    x: -0.3,
                    $Rows: 2,
                    $SlideOut: true,
                    $ChessMode: {$Row: 3},
                    $Easing: {$Left: $Jease$.$InCubic, $Opacity: $Jease$.$Linear},
                    $Opacity: 2
                },
                {
                    $Duration: 1200,
                    x: 0.3,
                    y: 0.3,
                    $Cols: 2,
                    $Rows: 2,
                    $During: {$Left: [0.3, 0.7], $Top: [0.3, 0.7]},
                    $ChessMode: {$Column: 3, $Row: 12},
                    $Easing: {$Left: $Jease$.$InCubic, $Top: $Jease$.$InCubic, $Opacity: $Jease$.$Linear},
                    $Opacity: 2
                },
                {
                    $Duration: 1200,
                    x: 0.3,
                    y: 0.3,
                    $Cols: 2,
                    $Rows: 2,
                    $During: {$Left: [0.3, 0.7], $Top: [0.3, 0.7]},
                    $SlideOut: true,
                    $ChessMode: {$Column: 3, $Row: 12},
                    $Easing: {$Left: $Jease$.$InCubic, $Top: $Jease$.$InCubic, $Opacity: $Jease$.$Linear},
                    $Opacity: 2
                },
                {
                    $Duration: 1200,
                    $Delay: 20,
                    $Clip: 3,
                    $Assembly: 260,
                    $Easing: {$Clip: $Jease$.$InCubic, $Opacity: $Jease$.$Linear},
                    $Opacity: 2
                },
                {
                    $Duration: 1200,
                    $Delay: 20,
                    $Clip: 3,
                    $SlideOut: true,
                    $Assembly: 260,
                    $Easing: {$Clip: $Jease$.$OutCubic, $Opacity: $Jease$.$Linear},
                    $Opacity: 2
                },
                {
                    $Duration: 1200,
                    $Delay: 20,
                    $Clip: 12,
                    $Assembly: 260,
                    $Easing: {$Clip: $Jease$.$InCubic, $Opacity: $Jease$.$Linear},
                    $Opacity: 2
                },
                {
                    $Duration: 1200,
                    $Delay: 20,
                    $Clip: 12,
                    $SlideOut: true,
                    $Assembly: 260,
                    $Easing: {$Clip: $Jease$.$OutCubic, $Opacity: $Jease$.$Linear},
                    $Opacity: 2
                }
            ];

            var jssor_1_options = {
                $AutoPlay: true,
                $SlideshowOptions: {
                    $Class: $JssorSlideshowRunner$,
                    $Transitions: jssor_1_SlideshowTransitions,
                    $TransitionsOrder: 1
                },
                $ArrowNavigatorOptions: {
                    $Class: $JssorArrowNavigator$
                },
                $ThumbnailNavigatorOptions: {
                    $Class: $JssorThumbnailNavigator$,
                    $Cols: 10,
                    $SpacingX: 8,
                    $SpacingY: 8,
                    $Align: 360
                }
            };

            var jssor_1_slider = new $JssorSlider$("jssor_1", jssor_1_options);

            /*responsive code begin*/
            /*you can remove responsive code if you don't want the slider scales while window resizing*/
            function ScaleSlider() {
                var refSize = jssor_1_slider.$Elmt.parentNode.clientWidth;
                if (refSize) {
                    refSize = Math.min(refSize, 800);
                    jssor_1_slider.$ScaleWidth(refSize);
                }
                else {
                    window.setTimeout(ScaleSlider, 30);
                }
            }

            ScaleSlider();
            $(window).bind("load", ScaleSlider);
            $(window).bind("resize", ScaleSlider);
            $(window).bind("orientationchange", ScaleSlider);
            /*responsive code end*/

        });
    </script>
@endsection